<script setup>
import play from '@/components/Play.vue'
import { getWordListAPI } from '@/api/words.js'
import { ref } from 'vue'

const paramlist = ref({
  page: 1,// 默认第一页
  limit: 10// 默认10条
})
// 获取单词列表
const data = ref([])// 存单词总列表
const count = ref(0)// 存单词总数
const getWordList = async () => {
  const { results, amount } = await getWordListAPI(paramlist.value)
  data.value.push(...results)
  // console.log(data.value);
  count.value = amount
}

// 直接调用，获取数据不要放进onMounted中了
getWordList()

const load = async () => {
  paramlist.value.page += 1;
  await getWordList()
  // 判断是否加载完毕
  if (data.value.length >= count.value) {
    return ElMessage.warning('没有更多单词了')
  }
};
</script>

<template>
  <h1>四级单词</h1>
  <div v-infinite-scroll="load" class="page" infinite-scroll-distance="1">
    <play :data="data"></play>
  </div>

  <!-- 回到顶部 -->
  <el-backtop :right="100" :bottom="100" style="color: #5bbe9e;" />
</template>

<style lang="scss" scoped>
h1 {
  margin: 50px 0 30px 20%;
}

.page {
  width: 80%;
  margin: 0 auto;
  overflow-y: visible;
}
</style>